<template>
	<view class="content" v-if="isShow" @click.stop="isShow=false">
		<view class="" style="color: #FFFFFF;margin-bottom: 20rpx;font-size: 24rpx;" v-if="ready">
			长按图片保存到相册
		</view>
		<canvas @click.stop="" :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="my-canvas" style="position: absolute;left: 9999999999px;" ></canvas>
		<image :src="imgPath" mode="" :style="{ width: canvasW + 'px', height: canvasH + 'px'}" v-if="ready"></image>
		<view class="" style="width: 100%;text-align: center;margin-top: 20rpx;" v-if="ready">
			<image src="../../static/image/xx.png" mode="" style="width: 68rpx;height: 68rpx;"></image>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			title:{
				type: String,
				default: '草莓千层蛋糕'
			},
			subTitle:{
				type: String,
				default: '鲜嫩多汁的草莓融合香甜奶油'
			},
			price:{
				type: Number,
				default: 36.89
			},
			abImg:{
				type: String,
				default: 'https://oss.zhangyubk.com/bottomab.png'
			}
		},
		data(){
			return {
				canvasW: 0,
				canvasH: 0,
				ctx: null,
				isShow: false,
				qrcode: '',
				ready:false,
				imgPath:'',
				ewm:'',
				ewm5:''
			}
		},
		methods:{
			//显示
			showCanvas(qrcode){
				this.isShow = true
				this.qrcode = qrcode
				this.__init()
			},
			//初始化画布
			async __init(){
				this.ready = false;
				uni.showLoading({
				    title: '加载中...',
					mask: true
				})
				await this.getMark()

				this.ctx = uni.createCanvasContext('my-canvas',this)
				this.canvasW = uni.upx2px(550);
				this.canvasH = uni.upx2px(820);
				//设置画布背景透明
				this.ctx.setFillStyle('rgba(255, 255, 255, 0)')
				//设置画布大小
				this.ctx.fillRect(0,0,this.canvasW,this.canvasH)
				this.ctx.drawImage('../../static/image/canbg.png',0,0,this.canvasW,this.canvasH)  //海报背景
				// this.ctx.drawImage('../../static/image/ewm.png',uni.upx2px(175),uni.upx2px(480),uni.upx2px(200),uni.upx2px(200))  //海报背景
				this.ctx.drawImage(this.ewm,uni.upx2px(175),uni.upx2px(480),uni.upx2px(200),uni.upx2px(200))  //绘制二维码
				//绘制圆角背景
				// this.drawRoundRect(this.ctx, 0, 0, this.canvasW, this.canvasH,uni.upx2px(18),'#FFFFFF')
				//获取标题图片
				let hW = uni.upx2px(500);
				let hH = uni.upx2px(320);
				//绘制标题图
				//绘制标题
				//绘制副标题
				//延迟渲染
				setTimeout(()=>{
					this.ctx.draw(true,()=>{
						uni.hideLoading()
						this.ready = true;
						this.saveImage()
					})
				},500)
			},
			// 获取二维码
			async getMark(){
				await this.api.crateQrCode({envVersion: 'trial' }).then(res=>{
					this.ewm = `data:image/jpeg;base64,${res.data.data.buffer}`
				}).catch(err=>{
					
				})
			},
			// 获取二维码
			async getBase(){
				await this.api.getBase({}).then(res=>{
					// console.log(res)
					this.ewm = res.data.s
					// console.log(res.data);
					// this.cacheHelper.setToken(res.data.session_id)
				}).catch(err=>{
					
				})
			},
			tog(imgPath){
				let promise = new Promise(function (resolve, reject) {
				    uni.getImageInfo({
				      src: imgPath,
				      success: function (res) {
				        resolve(res.path);
				      }
				    })
				  });
				  return promise
			},
			// // 图片转本地
			async getNetworkImage(url) {
				return new Promise((resolve, reject) => {
					uni.downloadFile({
						url,
						success: e => {
							console.log(e,555555666)
							const p = e.tempFilePath;
							if (p.indexOf('json') > -1) {
								reject(p);
								return false;
							}
							resolve(p);
						},
						fail: r => {
							// console.log()
							reject(r);
						}
					});
				});
			},
			//绘制实心圆
			drawEmptyRound(ctx,x,y,radius){
				ctx.save()
				ctx.beginPath();
				ctx.arc(x, y, radius, 0, 2 * Math.PI,true);
				ctx.setFillStyle('rgba(0, 0, 0, .4)')
				ctx.fill();
				ctx.restore()
				ctx.closePath()
			},
			//绘制虚线
			drawDashLine(ctx,x1,y1,x2,y2,dashLength){
				ctx.setStrokeStyle("#cccccc")//设置线条的颜色
				ctx.setLineWidth(1)//设置线条宽度
				var dashLen = dashLength,
				xpos = x2 - x1, //得到横向的宽度;
				ypos = y2 - y1, //得到纵向的高度;
				numDashes = Math.floor(Math.sqrt(xpos * xpos + ypos * ypos) / dashLen); 
				//利用正切获取斜边的长度除以虚线长度，得到要分为多少段;
				for(var i=0; i<numDashes; i++){
				 if(i % 2 === 0){
					 ctx.moveTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i); 
					 //有了横向宽度和多少段，得出每一段是多长，起点 + 每段长度 * i = 要绘制的起点；
				  }else{
					  ctx.lineTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i);
				  }
				}
				ctx.stroke();
			},
			//带圆角图片
			drawRoundImg(ctx, img, x, y, width, height, radius){
				ctx.beginPath()
				ctx.save()
				// 左上角
				ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5)
				// 右上角
				ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2)
				// 右下角
				ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5)
				// 左下角
				ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI)
				ctx.stroke()
				ctx.clip()
				ctx.drawImage(img, x, y, width, height);
				ctx.restore()
				ctx.closePath()
			},
			//圆角矩形
			drawRoundRect(ctx, x, y, width, height, radius, color){
				ctx.save();
				ctx.beginPath();
				ctx.setFillStyle(color); 
				ctx.setStrokeStyle(color)
				ctx.setLineJoin('round');  //交点设置成圆角
				ctx.setLineWidth(radius);
				ctx.strokeRect(x + radius/2, y + radius/2, width - radius , height - radius );
				ctx.fillRect(x + radius, y + radius, width - radius * 2, height - radius * 2);
				ctx.stroke();
				ctx.closePath();
			},
			//获取图片
			getImageInfo(imgSrc){
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: imgSrc,
						success: (image) => {
							resolve(image);
							console.log('获取图片成功',image)
						},
						fail: (err) => {
							reject(err);
							console.log('获取图片失败',err)
						}
					});
				});
			},
			//保存图片到相册
			saveImage(){
			
				var that = this
				uni.canvasToTempFilePath({
					canvasId: 'my-canvas',
					 x: 0,
					  y: 0,
					  width: that.canvasW,
					  height: that.canvasH,
					  destWidth: that.canvasW*2,
					  destHeight: that.canvasH*2,
					// quality: 1,
					complete: (res) => {
						// console.log('保存到相册',res);
						// console.log(res.tempFilePath)
						that.imgPath = res.tempFilePath.replace(/[\r\n]/g,"")
					}
				},this);
			}
		}
	}
</script>

<style scoped lang="scss">
.content{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,.4);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	.save-btn{
		margin-top: 60rpx;
		color: #FFFFFF;
		background: linear-gradient(to right, #FED243 , #FCD245);
		// padding: 15rpx 40rpx;
		width: 352rpx;
		height: 96rpx;
		box-shadow: 0 2rpx 8rpx 0rpx #BF4932;
		border-radius: 48rpx;
		font-size: 38rpx;
		text-align: center;
		line-height: 96rpx;
		color: #814B0B;
		font-weight: 700;
	}
}
</style>
